<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>请假流程管理系统</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.14/index.min.css">
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <div id="app">
        <el-container>
            <el-header>
                <h2>请假流程管理系统</h2>
            </el-header>
            <el-main>
                <!-- 发起请假 -->
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-card>
                            <template #header>
                                <div class="card-header">
                                    <span>发起请假申请</span>
                                </div>
                            </template>
                            <el-form :model="leaveForm" label-width="120px">
                                <el-form-item label="请假人">
                                    <el-input v-model="leaveForm.employee" placeholder="请输入请假人姓名"/>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="startProcess">提交申请</el-button>
                                </el-form-item>
                            </el-form>
                        </el-card>
                    </el-col>
                </el-row>

                <!-- 待办任务 -->
                <el-row :gutter="20" style="margin-top: 20px">
                    <el-col :span="24">
                        <el-card>
                            <template #header>
                                <div class="card-header">
                                    <span>我的待办任务</span>
                                    <el-button-group>
                                        <el-button type="primary" plain @click="deployProcess">
                                            <el-icon><Plus /></el-icon>部署流程
                                        </el-button>
                                        <el-button type="primary" @click="refreshManagerTasks">
                                            <el-icon><Refresh /></el-icon>刷新
                                        </el-button>
                                    </el-button-group>
                                </div>
                            </template>
                            
                            <el-table :data="managerTasks" style="width: 100%" border>
                                <el-table-column label="序号" type="index" width="80" align="center"/>
                                <el-table-column label="申请人" prop="employee" min-width="120" align="center"/>
                                <el-table-column label="任务名称" prop="taskName" min-width="150" align="center"/>
                                <el-table-column label="创建时间" prop="createTime" min-width="180" align="center"/>
                                <el-table-column label="操作" width="200" align="center" fixed="right">
                                    <template #default="scope">
                                        <el-button-group>
                                            <el-button type="success" size="small" @click="approve(scope.row.taskId, true)">
                                                同意
                                            </el-button>
                                            <el-button type="danger" size="small" @click="approve(scope.row.taskId, false)">
                                                拒绝
                                            </el-button>
                                            <el-button type="info" size="small" @click="showTaskDetail(scope.row)">
                                                详情
                                            </el-button>
                                        </el-button-group>
                                    </template>
                                </el-table-column>
                            </el-table>
                            
                            <div class="empty-block" v-if="managerTasks.length === 0">
                                <el-empty description="暂无待办任务"/>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>

                <!-- 历史流程 -->
                <el-row :gutter="20" style="margin-top: 20px">
                    <el-col :span="24">
                        <el-card>
                            <template #header>
                                <div class="card-header">
                                    <span>历史流程记录</span>
                                    <el-button @click="refreshProcessInstances">
                                        <el-icon><Refresh /></el-icon>刷新
                                    </el-button>
                                </div>
                            </template>
                            <el-table :data="processInstances" style="width: 100%" border>
                                <el-table-column label="序号" type="index" width="80" align="center"/>
                                <el-table-column label="流程名称" prop="processDefinitionName" min-width="150" align="center"/>
                                <el-table-column label="开始时间" prop="startTime" min-width="180" align="center"/>
                                <el-table-column label="结束时间" min-width="180" align="center">
                                    <template #default="scope">
                                        {{ scope.row.endTime || '进行中' }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" width="100" align="center" fixed="right">
                                    <template #default="scope">
                                        <el-button type="primary" size="small" @click="showTaskDetail(scope.row)">
                                            详情
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            
                            <div class="empty-block" v-if="processInstances.length === 0">
                                <el-empty description="暂无历史记录"/>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>

                <!-- 任务详情对话框 -->
                <el-dialog v-model="historyDialogVisible" title="流程详情" width="60%">
                    <div class="process-info" v-if="currentTask">
                        <el-descriptions :column="2" border>
                            <el-descriptions-item label="流程实例ID">{{ currentTask.processInstanceId || currentTask.id }}</el-descriptions-item>
                            <el-descriptions-item label="任务ID">{{ currentTask.taskId }}</el-descriptions-item>
                            <el-descriptions-item label="请假人">{{ currentTask.employee }}</el-descriptions-item>
                            <el-descriptions-item label="创建时间">{{ currentTask.createTime || currentTask.startTime }}</el-descriptions-item>
                        </el-descriptions>
                    </div>
                    
                    <el-divider>
                        <el-tag type="info" effect="plain">处理历史</el-tag>
                    </el-divider>
                    
                    <el-timeline>
                        <el-timeline-item
                            v-for="task in historyTasks"
                            :key="task.id"
                            :type="getTimelineItemType(task)"
                            :timestamp="task.startTime"
                            :hollow="!task.endTime">
                            <el-card class="timeline-card">
                                <template #header>
                                    <div class="timeline-header">
                                        <span>{{ task.name }}</span>
                                        <el-tag 
                                            v-if="task.endTime" 
                                            :type="task.variables?.approved ? 'success' : task.variables?.approved === false ? 'danger' : 'info'"
                                            size="small">
                                            {{ getTaskStatus(task) }}
                                        </el-tag>
                                    </div>
                                </template>
                                <div class="timeline-content">
                                    <p><el-icon><User /></el-icon> 处理人：{{ task.assignee || '系统自动' }}</p>
                                    <p v-if="task.endTime">
                                        <el-icon><Timer /></el-icon> 完成时间：{{ task.endTime }}
                                    </p>
                                </div>
                            </el-card>
                        </el-timeline-item>
                    </el-timeline>
                </el-dialog>
            </el-main>
        </el-container>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.14/index.full.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-plus-icons-vue/2.1.0/index.iife.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.min.js"></script>
    <script src="/js/app.js"></script>
</body>
</html>